<!DOCTYPE html>
<!-- 采用html5  -->
<html>

<head>
    <meta charset="UTF-8">

    <!-- 页面显示适应移动设备 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>我的APP</title>

    <link rel="stylesheet" href="resources\we-vue\style.css">
    <link rel="stylesheet" href="resources\css\font-awesome.min.css">

    <style>
        /*元素选择器*/

        html {
            height: 100%;
        }

        body {
            height: 100%;
            padding: 0px;
            /*内边距*/
            margin: 0px;
            /*外边距*/
        }

        .my-container {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: #f0f0f0;
        }

        .my-content {
            position: absolute;
            top: 53px;
            bottom: 0px;
            box-sizing: border-box;
            width: 100%;
            padding: 3px;

            overflow: auto;
            /*内容超出范围，自动出现滚动条*/
        }

        .my-panel {
            font-size: 13px;
            color: #333333;
            background-color: white;

            margin-top: 10px;
            padding-left: 10px;
            padding-right: 10px;

            border: 1px solid #CCCCCC;
            box-shadow: 0px 0px 5px 0px #CCCCCC;
            border-radius: 5px;

        }

        .my-title {
            border-bottom: 1px solid #EEEEEE;
            height: 30px;
            line-height: 30px;
        }

        .my-field {
            display: inline-block;

            padding-top: 8px;
            padding-bottom: 8px;
            width: 100px;

        }
    </style>


</head>


<body>

    <div id="app" class="my-container">

        <wv-header :fixed="false" :title="title">
            <div slot="left">
                <i @click="back" class="fa fa-times-circle"></i>
            </div>
            <div slot="right">
                <i @click="searchTo" class="fa fa-search"></i>
            </div>
        </wv-header>

        <!-- 清单界面 -->
        <div class="my-content">

            <div class="my-panel" v-for="emp in emps" :key="emp.e_id">
                <div class="my-title">{{emp.e_id}}</div>
                <div class="my-field">{{emp.e_name}}</div>
                <div class="my-field">{{emp.e_sex}}</div>
                <div class="my-field">{{emp.d_name}}</div>
            </div>

        </div>

        <!-- 
            查询弹出窗

            searchVisible 是一个boolean类型变量，该变量为true显示弹出窗，否则隐藏弹出窗
        -->
        <wv-popup :visible.sync="searchVisible" height="100%" style="background-color: #f0f0f0;overflow: auto;">

            <wv-group>
                <wv-switch v-model="searchVisible" title="关闭"  />                
            </wv-group>

            <wv-panel>               
                <wv-input v-model="queryObj.e_id"  label="工号" ></wv-input>
                <wv-input v-model="queryObj.e_name" label="姓名"  ></wv-input>
            </wv-panel>

            <wv-group >
                <wv-radio v-model="queryObj.e_sex" title="性别"  :options="[{label:'不限',value:'-1'},{label:'男',value:'男'},{label:'女',value:'女'}]" ></wv-radio>
            </wv-group>

            <wv-group>
                <!-- depOptions是部门选项数组 最多选一项 -->
                <wv-radio v-model="queryObj.e_dep" title="部门"  :options="depOptions" ></wv-radio>
            </wv-group>
            
            <div style="display: flex;flex-flow: row;justify-content:space-between;">
                <wv-button  type="default" style="margin-top:10px;width:49%;" >重置</wv-button>
                <wv-button @click="empDoSearch"  type="primary" style="margin-top:10px;width:49%;" >完成</wv-button>
            </div>

        </wv-popup>

    </div>

</body>

<script src="resources\js\vue.min.js"></script>
<script src="resources\js\jquery.min.js"></script>
<script src="resources\we-vue\index.js"></script>
<script src="resources\layer_mobile\layer.js"></script>
<script src="resources\js\my.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {


            title: '员工管理',

            emps: [], //清单数据

            searchVisible:false,

            //部门选项数组
            depOptions:[
                {label:'不限',value:'-1'}
            ],

            //查询条件对象
            queryObj:{
                e_id:'',
                e_name:'',
                e_sex:'-1',
                e_dep:'-1'
            }



        },
        methods: {

            //获取所有清单数据
            loadList() {
                Serv.loadData({
                    url: '/empList.jsp'
                }, (emps) => {
                    this.emps = emps;
                });
            },

            //返回
            back() {

                window.location.href = 'home.html';

            },

            //筛选查询
            searchTo() {
                this.searchVisible=true
            },

            //加载部门选项
            loadDepOptions(){
                Serv.loadData({url:'/depList.jsp'},(deps)=>{
                    for(let i=0;i<deps.length;i++){
                        //将部门信息转换为选项
                        this.depOptions.push(
                            {label:deps[i].d_name,value:deps[i].d_id}
                        );
                    }
                });
            },

            //执行查询
            empDoSearch(){                
                Serv.loadData({
                    url: '/empList.jsp',
                    data: this.queryObj
                }, (emps) => {
                    this.emps = emps;
                });
                this.searchVisible=false;
            }

            
            


        },
        mounted() {

            this.loadList(); //获取清单数据
            this.loadDepOptions();

        }
    });
</script>


</html>